/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="index_class">

		<view class="liveHeader">
			<view class="listWrap">
				<view v-for="(item,index) in getHeadList" :key="index" @click="tabCurrent(item)" class="item"
					:class="{active:selectItemObj.id===item.id}">
					<h3 class="title">{{item.name}}</h3>
					<p class="tip">{{item.title}}</p>
				</view>
			</view>
		</view>

		<view class="bigWrap" :style="{marginTop:bodyMarginTop}">
			<!--  关注专区-->
			<view class="followWrap" v-show="selectItemObj.id==1">
				<view v-for="(item,index) in followShopList" :key="index">
					<shopItem :shop="item" @hook:beforeUpdate="$loading" @hook:updated="$hideLoading" />
				</view>
				<view v-if="!isLogin" class="noLoginWrap u-flex-col u-text-center">
					<u-image width="400" height="400" :src="getNoFavoriteImg" class="nullStatusImg"></u-image>
					<u-button type="warning" class="u-m-t-40" shape="circle" plain size="medium" @click="toLogin()">
						{{$t('请先登录')}}</u-button>
				</view>
				<u-empty v-if="followShopList.length===0&&isLogin" :src="getNoFavoriteImg" icon-size="300"
					:text="$t('暂无数据')"></u-empty>
			</view>

			<!--  短视频-->
			<view class="videoList" v-show="selectItemObj.id==2">
				<u-waterfall v-model="flowList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
							<!-- 警告：微信小程序中需要hx2.8.11以上版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
							<u-lazy-load threshold="-450" border-radius="10" :image="item.cover_img" :index="index"
								@click="openShortVideo(item)"></u-lazy-load>
							<view class="u-p-10">{{item.goods_name}}</view>
							<view class="u-flex u-row-between u-p-r-10 u-p-l-10 u-p-t-10">
								<view class="u-flex u-col-center">
									<u-image :src="item.shop_logo" width="40" height="40" shape="circle"></u-image>
									<span class="u-line-1 u-m-l-5 u-font-xs shortVideoTitle">{{item.shop_name}}</span>
								</view>
								<span class="u-font-xs">
									<u-icon name="heart" color="#545454" size="24" class="u-m-r-5"></u-icon>
									{{item.praise_num}}
								</span>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
							<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
							<u-lazy-load threshold="-450" border-radius="10" :image="item.cover_img" :index="index"
								@click="openShortVideo(item)"></u-lazy-load>
							<view class="u-p-10">{{item.goods_name}}</view>
							<view class="u-flex u-row-between u-p-r-10 u-p-l-10 u-p-t-10">
								<view class="u-flex u-col-center">
									<u-image :src="item.shop_logo" width="40" height="40" shape="circle"></u-image>
									<span class="u-line-1 u-m-l-5 u-font-xs shortVideoTitle"> {{item.shop_name}}</span>
								</view>
								<span class="u-font-xs u-flex u-row-center u-flex">
									<u-icon name="heart" color="#545454" size="24" class="u-m-r-5 u-flex"
										:label="item.praise_num"></u-icon>
								</span>
							</view>
						</view>
					</template>
				</u-waterfall>
				<u-empty v-if="flowList.length===0" :src="getNoListImg" icon-size="300" :text="$t('暂无数据')"></u-empty>
			</view>
			
			<!--上新专区-->
			<view class="followWrap" v-show="selectItemObj.id==3">
				<block v-for="(item,index) in  newShoperList" :key="index">
					<shopperCard :info="item" @hook:beforeUpdate="$loading" @hook:updated="$hideLoading">
					</shopperCard>
				</block>
			
				<u-empty v-if="newShoperList.length===0" :src="getNoListImg" icon-size="300" :text="$t('暂无数据')">
				</u-empty>
			</view>
			
		</view>
		<u-loadmore :status="loadStatus" :load-text="loadText" />
	</view>
</template>

<script>
	let isOpenReachBottom = false
	import shopItem from '@/components/shop/shopItem'
	import shopperCard from "@/components/shopperCard";

	let sortArray = []
	let cacheMap = new Map();
	export default {

		data() {
			return {
				adList: [],
				headList: [],
				navList: [],
				list: [],
				currIndex: 0,
				liveSortIndex: 0,
				currType: 1,
				loadingType: 0,
				headerPosition: 'fixed',
				currentIndex: 3,
				isScrollTop: false,
				followShopList: [],
				page: 1,
				loadStatus: 'loadmore',
				flowList: [],
				newShoperList: [],
				bodyMarginTop: '',
				isOpenLive: false,
				selectItemObj: {
					id: 2,
					is_show: 1,
					name: this.$t('短视频'),
					sort: 2,
					title: this.$t('精选好物'),
				},
				headerStyle: {
					'position': ""
				},
				isLogin: false

			}
		},
		// 获取节点信息必须写在 onReady生命周期内
		onReady() {
			const platform = uni.getSystemInfoSync().platform
			const addHieght = platform === 'android' ? 66 : 42
			this.$u.getRect('.listWrap').then(res => {
				this.$nextTick(() => {
					// #ifdef APP-PLUS
					this.bodyMarginTop = res.height + addHieght + 'rpx'
					// #endif
					// #ifndef APP-PLUS
					this.bodyMarginTop = 100 + 'rpx'
					// #endif
				})
			})
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮

			}
			return {
				title: this.$t('哆嗯 直播种草电商'),
				path: '/pagesC/live/index',
			}
		},
		onShow() {
			const token = uni.getStorageSync('token')
			if (token) {
				this.isLogin = true
			}
		},

		onLoad(option) {
			this.getFindCate()
			sortArray = new Array(15).fill([])

		},
		watch: {
			selectItemObj: {
				handler(val) {
					this.getFunction(val.name)
				},
				deep: true,
				immediate: true
			}
		},
		onReachBottom() {
			isOpenReachBottom = true //下拉设置 isOpenReachBottom为空， 关闭接口方法中获取cacheMap缓存值
			const cacheData = cacheMap.get(this.selectItemObj)
			this.page = cacheData.page
			let loadStatus = cacheMap.get(this.selectItemObj).loadStatus
			if (loadStatus == 'nomore') return;
			this.page++
			this.loadStatus = 'loading'
			const name = this.selectItemObj.name
			this.getFunction(name)

		},

		onPullDownRefresh() {

			this.headerStyle.position = 'static'
			const name = this.selectItemObj.name

			isOpenReachBottom = true
			this.page = 1
			this.getFunction(name)
		},

		computed: {
			getHeadList() {
				return this.headList.filter(res => res.is_show == 1)
			},
			getNoListImg() {
				return this.STATICURL + 'images/nullStatus/noList.png'
			},
			getNoFavoriteImg() {

				return this.STATICURL + 'images/nullStatus/noFavorite.png'
			},
			loadText() {
				return {
					loadmore: this.$t('上拉显示更多'),
					loading: this.$t('加载中'),
					nomore: this.$t('没有更多了')
				}
			}
		},
		components: {
			shopItem, //关注店铺列表
			shopperCard, //上新card组件
		},

		methods: {
			toLogin() {
				// #ifdef MP-WEIXIN
				this.$u.route({
					url: '/pages/tabBar/my',
					type: 'tab',
				})
				// #endif
				this.$u.route('/pagesB/login/login')
			},
			openShortVideo(item) {
				let url = '/pagesB/shortVideo/h5mpShortVideo'
				// #ifdef APP-PLUS
				url = '/pagesB/shortVideo/appShortVideo'
				// #endif
				this.$u.route(url, {
					id: item.id
				})
			},
			getFunction(name) {

				let obj = this.selectItemObj
				let isHasCacheData = cacheMap.has(obj)
				let cacheData, cacheList;
				if (isHasCacheData) {
					cacheData = cacheMap.get(obj)
					cacheList = cacheData.list
					this.loadStatus = cacheData.loadStatus
				}
				if (name == this.$t('关注')) {

					if (isHasCacheData && !isOpenReachBottom) {
						return this.followShopList = cacheList
					}

					this.getFollowShops()
				}
				if (name == this.$t('上新')) {
					this.$toast(isHasCacheData)
					if (isHasCacheData && !isOpenReachBottom) {
						return this.newShoperList = cacheList
					}
					this.getNewsList()
				}
				if (name == this.$t('短视频')) {
					if (isHasCacheData && !isOpenReachBottom) {
						return this.flowList = cacheList
					}
					this.getVideoList()
				}
			},

			// 动态获取顶部一级分类列表
			getFindCate() {
				this.$http.getFindCate().then(res => {
					this.headList = res.data.cate_list
				})
			},
			// 顶部一级分类切换
			tabCurrent(item) {
				this.$set(this, 'selectItemObj', item)
				if (cacheMap.has(item)) {
					let cachePage = cacheMap.get(item).page
					this.page = cachePage || 1
				}

			},
			getisSendPost() {

				if (cacheMap.has(this.selectItemObj) && !isOpenReachBottom) {
					return false
				}
			},

			// 获取关注的店铺列表
			getFollowShops() {
				this.getisSendPost()
				const data = {
					page: this.page
				}
				this.$http.getFollowShops(data).then(res => {
					if (res.status === 200) {
						this.loadStatus = 'loadmore'
						this.dealApiData('followShopList', res.data)

					}
				})
			},
			getNewsList() {

				this.getisSendPost()
				const data = {
					page: this.page
				}
				this.$http.getNewsList(data).then(res => {
					this.loadStatus = 'loadmore'
					this.dealApiData('newShoperList', res.data.news_list)

				})
			},
			getVideoList() {
				this.getisSendPost()
				let data = {
					page: this.page
				}
				this.$http.getVideoList(data).then(res => {
					this.loadStatus = 'loadmore'
					this.dealApiData('flowList', res.data.video_list)
				})
			},
			dealApiData($dataKey, data) {
				uni.stopPullDownRefresh()
				isOpenReachBottom = false //只在下拉onReachBottom中开启    请求成功后 关闭
				if (this.page <= 1) {
					this.$set(this, $dataKey, data)
				} else {
					this[$dataKey] = this[$dataKey].concat(data)
				}
				this.addCacheMap(this[$dataKey]) //缓存列表数据
				if (data.length <= 10) return this.loadStatus = 'nomore'; //如果返回的列表数据小于等于10 ，则判断为没有更多数据
			},
			// map缓存  缓存当前分类对象  数据列表  page值， 避免切换时多次请求和
			addCacheMap(list) {
				cacheMap.set(
					this.selectItemObj, {
						list, //数据
						page: this.page, //分页
						loadStatus: this.loadStatus //触底加载状态
					}
				)
			},
			preView(list, index) {
				uni.previewImage({
					urls: list,
					current: index,

				});
			},

		},


	}
</script>

<style lang="scss" scoped>

	.live-itemlist__wrap {
		padding: 0 16rpx 60rpx 16rpx;
		background: #F4F4F4;
		font-size: 0;
		display: flex;
		flex-wrap: wrap;

		.live-itemlist__item {
			flex: 1;
			flex-basis: 300rpx;
			margin-top: 16rpx;
			background: #fff;
			border-radius: 10rpx;
			margin-right: 20rpx;

			&:nth-of-type(2n) {
				margin-right: 0rpx;
			}
		}

	}

	.live-title__title {
		font-size: 32rpx;
		text-align: center;
	}

	.live-ranklist__item .disable {
		right: 0 !important;
		left: inherit !important;
		width: 80rpx !important;
		background: transparent !important;
		color: #fff;

	}

	.live-ranklist__item .active {
		right: 0 !important;
		left: inherit !important;
		width: 80rpx !important;
		background: #FA3F3F !important;
		border-color: #FA3F3F;
	}

	.live-itemlist__item--header .active {
		background: #ff7d23 !important;
		color: #fff !important;
		border-color: #ff7d23;
	}

	.live-ranklint__item--footer {
		padding-bottom: 20rpx !important;
		margin-bottom: 20rpx !important;
	}

	.bottomPanel {
		text-align: center;

		.title {
			font: 30rpx;
		}

		.keywords {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.liveList {
		@include flexbox();
		padding: 0 10rpx 50rpx;
	}

	.followWrap {
		margin: 0 0 120rpx;

	}


	/*短视频*/
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		position: relative;
		padding-bottom: 10rpx;
	}

	.shortVideoTitle {
		width: 220rpx;
		color: #a0a4a7;
	}

	.noLoginWrap {
		margin-top: 180rpx;
		text-align: center;

		image {
			margin: 0 auto;
		}

		button {
			margin: 0 auto;
		}
	}

	.nullStatusImg {
		width: 60%;
		margin: 0 auto;

	}


	.liveHeader {
		padding: 0 15rpx;
		/*  #ifndef  MP-WEIXIN */
		padding-top: var(--status-bar-height);

		/*  #endif  */
		.panel1 {
			@include flexbox;
			margin-bottom: 15rpx;

			.title {
				font-weight: 600;
				font-size: 40rpx;
				color: #444;
			}

			.tipInfo {
				font-size: 24rpx;
				font-weight: normal;
				color: #999;
			}

			h2 {
				margin-left: 20rpx;
				line-height: 1.4;
			}

			.iconWrap {
				margin-right: 25rpx;

				.icon {
					width: 48rpx;
					height: 48rpx;
					margin-left: 30rpx;

					&:first-child {
						width: 44rpx;
						height: 44rpx;
					}
				}
			}

		}

		.listWrap {
			@include flexbox;
			transition: all 0.7s;
			position: fixed;
			z-index: 999;
			background-color: #fff;
			left: 0;
			right: 0;
			border-bottom: 2rpx solid #f5f5f5;
			padding: 80rpx 30rpx 10rpx;

			/*  #ifndef APP-PLUS */
			padding: 10rpx 30rpx 10rpx;
			/*  #endif  */
			border-radius: 0 0 20rpx 20rpx;
			top: 0;

			.item {
				text-align: center;
				position: relative;

				&.active {
					color: #fa3e3f;

					.tip {
						background: linear-gradient(to right, #ffa468, #fa3f3f);
						padding: 4rpx 16rpx;

						color: #fff;
					}
				}

				&:not(:last-child) {
					padding-right: 67rpx;

					&::after {
						content: '';
						width: 1rpx;
						height: 50rpx;
						background-color: #ececec;
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}

				.title {
					font-size: 36rpx;
					line-height: 1.4;
				}

				.tip {
					margin: 0;
					padding: 4rpx 16rpx;
					line-height: 1;
					font-size: 24rpx;
					color: #888;
					border-radius: 100px;
					transition: all 0.2s;
				}
			}
		}

	}

	.coverView {
		position: fixed;

		background-color: transparent;

	}
</style>
